<template>
    <view class="member" style="padding-bottom: 100rpx">
        <view class="memberFillIn">
            <view class="memberFillIn-top">
                <text class="top-text">完善会员信息</text>
                <text class="top-text2">完善信息享有更多权益</text>
            </view>
            <view class="memberFillIn-img" @click="chooseImage()">
                <image :src="merberData.avatar" mode="scaleToFill" />
            </view>
            <view class="memberFillIn-form">
                <view class="form-item">
                    <text class="form-item-text">手机号码</text>
                    <input class="form-item-input" v-model="merberData.mobile" type="text" placeholder="请输入手机号" />
                </view>
                <view class="form-item">
                    <text class="form-item-text">昵称</text>
                    <input class="form-item-input" v-model="merberData.nickname" type="text" placeholder="请输入昵称" />
                </view>
                <view class="form-item">
                    <text class="form-item-text">出生日期</text>
                    <picker class="form-item-input" :range="years" :value="echoVal" @change="yearChange"
                        mode="multiSelector">
                        <text v-if="!merberData.birthday" class="form-item-input-text">请选择出生日期</text>
                        <text v-else class="form-item-input-text1">{{ merberData.birthday }}</text>
                        <image class="form-item-img" :src="imgUrl + '/static/images/merber/bottom.png'"
                            mode="scaleToFill" />
                    </picker>
                    <!-- <picker class="form-item-input" value="MM-DD" mode="date"
                        v-model="merberData.birthday">
                        
                    </picker> -->
                </view>
                <view class="form-item">
                    <text class="form-item-text">性别</text>
                    <view class="form-item-sex">
                        <view class="sex-item" v-if="merberData.gender == 1">
                            <image :src="imgUrl + '/static/images/merber/nan.png'" mode="scaleToFill" />
                        </view>
                        <view class="sex-item1" v-else @click="merberData.gender = 1">
                            <image :src="imgUrl + '/static/images/merber/nan1.png'" mode="scaleToFill" />
                        </view>
                        <view class="sex-item" v-if="merberData.gender == 0">
                            <image :src="imgUrl + '/static/images/merber/nv.png'" mode="scaleToFill" />
                        </view>
                        <view class="sex-item1" v-else @click="merberData.gender = 0">
                            <image :src="imgUrl + '/static/images/merber/nv1.png'" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="memberFillIn-btn">
                <view class="btn-text" @click="confirm()">保存</view>
            </view>
        </view>
    </view>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "MemberFillIn",
    mixins: [],
    props: {},
    data() {
        return {
            imgUrl: this.$imgUrl || "",
            merberData: {
                avatar: "", //头像
                mobile: "", //手机号
                nickname: "", //昵称
                birthday: "", //生日
                gender: 1, //性别

            },
            // avatar: "",
            years: [],
            yearsIndex1: 0,
            yearsIndex2: 0,
            echoVal: [], //当前日期回显
        };
    },
    computed: {
        ...mapState(["user", "statistics", "common"]),
    },
    watch: {
        user: {
            handler(newVal, oldVal) {
                this.avatar = newVal.avatar;
            },
            immediate: true,
        },
    },
    onLoad(options) {
        let userData = JSON.parse(options.userData);
        console.log(userData, "跳转数据");
        this.merberData.mobile = userData.mobile;
        this.merberData.nickname = userData.nickname;
        this.merberData.birthday = userData.birthday;
        this.merberData.gender = userData.gender;
        this.merberData.avatar = userData.avatar;
        var date = new Date();
        var year = date.getFullYear(); //获取完整的年份(4位)
        var month = date.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var nowDay = date.getDate(); //获取当前日(1-31)

        var d = new Date(year, month, 0);
        var day = d.getDate(); //获取一个月多少天

        console.log(month, date.getDate());
        this.yearsIndex1 = month - 1;
        this.yearsIndex2 = nowDay - 1;

        var list = [];
        for (var i = 0; i < day; i++) {
            var aa = i + 1;
            if (aa < 9) {
                aa = "0" + aa;
            } else {
                aa = '' + aa
            }
            list.push(aa);
        }


        var arr = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

        this.years.push(arr);
        this.years.push(list);

        this.echoVal.push(month - 1);
        this.echoVal.push(nowDay - 1);
    },
    mounted() { },
    methods: {
        //生日
        yearChange(e) {
            //获得对象的 detail的 value
            //通过数组的下标改变显示在页面的值
            this.yearsIndex1 = e.detail.value[0];
            this.yearsIndex2 = e.detail.value[1];
            this.merberData.birthday = e.detail.value[0] + '-' + e.detail.value[1]
        },
        //上传头像
        chooseImage() {
            uni.chooseImage({
                count: 1, // 默认9
                sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
                success: (res) => {
                    console.log(res.tempFilePaths[0]);
                    this.uploadFile(res.tempFilePaths[0]);
                    // 设置url的值，显示控件
                    // this.url = res.tempFilePaths[0];
                },
            });
        },
        uploadFile(file) {
            uni.request({
                url: "/wanlshop/common/uploadData",
                success: (updata) => {
                    uni.uploadFile({
                        url: updata.data.uploadurl,
                        filePath: file,
                        name: "file",
                        formData: updata.data.storage == "local" ? null : updata.data.multipart,
                        success: (res) => {
                            // this.avatar = JSON.parse(res.data).data.fullurl;
                            this.merberData.avatar = JSON.parse(res.data).data.fullurl;
                        },
                        fail: (error) => {
                            this.$wanlshop.msg(JSON.parse(error.data).msg);
                        },
                    });
                },
            });
        },
        //保存
        confirm() {
            if (this.merberData.mobile == "") {
                this.$wanlshop.msg("请输入手机号");
                return;
            }

            if (!/^1[0-9]{10,10}$/.test(this.merberData.mobile)) {
                this.$wanlshop.msg("请输入正确的手机号");
                return;
            }

            if (this.merberData.nickname == "") {
                this.$wanlshop.msg("请输入昵称");
                return;
            }
            if (this.merberData.birthday == "") {
                this.$wanlshop.msg("请选择生日");
                return;
            }
            console.log(this.merberData, "==============");
            uni.request({
                url: "/wanlshop/user/profile",
                method: "POST",
                data: this.merberData,
                success: (res) => {
                    // 保存用户信息
                    // this.$store.commit("user/setUserInfo", res.data);
                    this.$store.commit("user/setUserInfo", this.merberData);
                    console.log(res.data, "保存用户信息");
                    // 提示
                    this.$wanlshop.msg("保存成功");
                    setTimeout(() => {
                        uni.reLaunch({ url: "/pages/mine" });
                    }, 800);
                },
                fail: (e) => {
                    this.$wanlshop.msg("保存失败");
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.member {
    .memberFillIn {
        width: 100%;
        box-sizing: border-box !important;
        padding: 73rpx 74rpx 0;

        .memberFillIn-top {
            .top-text {
                display: block;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 42rpx;
                color: #252525;
                margin-bottom: 10rpx;
            }

            .top-text2 {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 26rpx;
                color: #bbbbbb;
            }
        }

        .memberFillIn-img {
            margin-top: 56rpx;
            margin-bottom: 66rpx;
            width: 110rpx;
            height: 110rpx;
            background: #000000;
            border-radius: 55rpx;
            overflow: hidden;
            border: 3px solid #ffffff;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .memberFillIn-form {
            .form-item {
                margin-bottom: 75rpx;

                .form-item-text {
                    display: inline-block;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #252525;
                    margin-bottom: 34rpx;
                }

                .form-item-input {
                    width: 100%;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 32rpx;
                    position: relative;

                    .form-item-input-text {
                        color: #bbbbbb;
                    }

                    .form-item-img {
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 20rpx;
                        height: 12rpx;
                        margin: 0 0 0 auto !important;
                    }
                }

                .form-item-sex {
                    display: flex;

                    .sex-item {
                        width: 140rpx;
                        height: 80rpx;
                        background: linear-gradient(90deg, #feda9d, #fee4b2, #fee4b2, #feda9d);
                        border-radius: 40rpx;
                        text-align: center;
                        line-height: 90rpx;
                        margin-right: 30rpx;

                        image {
                            width: 36rpx;
                            height: 36rpx;
                        }
                    }

                    .sex-item1 {
                        width: 140rpx;
                        height: 80rpx;
                        // background: linear-gradient(90deg, #feda9d, #fee4b2, #fee4b2, #feda9d);
                        border-radius: 40rpx;
                        text-align: center;
                        line-height: 90rpx;
                        margin-right: 30rpx;

                        image {
                            width: 36rpx;
                            height: 36rpx;
                        }
                    }
                }
            }
        }

        .memberFillIn-btn {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 135 + rpx;
            margin: 0 74rpx;

            .btn-text {
                width: 100%;
                height: 80rpx;
                background: linear-gradient(90deg, #feda9d, #fee4b2, #fee4b2, #feda9d);
                border-radius: 40rpx;
                text-align: center;
                line-height: 80rpx;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 32rpx;
                color: #64420f;
            }
        }
    }
}
</style>
